<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/all.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>joke</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>每日一笑</h1>
        </div>
        <div class="search">
            <select class="selectMethod">
                <option checked>选择你的请求方式</option>
                <option value="axios">axios</option>
                <option value="jq">ajax</option>
                <option value="js">原生ajax</option>
            </select>
        </div>
        <div class="emptyDiv">
        </div>
    </div>
</body>

<script type="module">
    import * as method from './JS/everyMethod.js'
    $(document).ready(function () {
        console.log('滚动', window.scroll())
        $(window).scroll(function (event) {
            console.log(document.scrollTop)
        })
        $('.selectMethod').change(function (event) {

            let url = 'http://jisuxhdq.market.alicloudapi.com/xiaohua/text?pagesize=20&sort=addtime&pagenum=40'
            let value = event.target.value
            if (value == 'jq') {
                method.xmlFindJq('GET', url, jqXhrGetData)
            } else if (value == 'axios') {
                method.axiosFind('GET', url, axiosGetData)
            } else if (value == 'js') {
                method.xmlFindJs('GET', url, jsXhrGetData)
            }
        })
        function axiosGetData(response) {
            console.log(response)
            execudateData(response.data.result)


        }
        function jqXhrGetData(response) {
            execudateData(response.result)

        }
        function jsXhrGetData(response) {
            console.log(response)
            execudateData(response.result)

        }
        function execudateData(data) {
            const currentList = data
            console.log('currentList', currentList)
            let strList;
            let str;
            for (var i = 0; i < currentList.list.length; i++) {
                try {
                    str = ` 
            <div class="card">
                <span>${currentList.list[i].content}</span>
                <div class="time">${currentList.list[i].addtime}</div>
            </div>
       `
                } catch (err) {
                    console.log(err)
                } finally {

                    strList += str
                }

            }
            console.log('strList', strList)
            $('.emptyDiv').append(strList)
        }
    })



</script>

<style>
    .card img {
        width: 100%;
    }

    .card {
        max-width: 85%;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border-radius: 4px;
        margin: 10px auto;
        position: relative;
    }

    .card span {
        font-size: 12px;
        color: #000000;
        display: block;
        letter-spacing: 2px;
        padding: 30px 20px;
    }

    .time {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .emptyDiv {
        width: 100%;
        height: 200px;
    }
</style>

</html>